<template>
  <div>
    <!-- <h3>当前最新的count值为:{{this.$store.state.count}}</h3> -->
    <h3>当前最新的count值为:{{count}}</h3>
    <!-- <button @click="handleAdd">+1</button> -->
    <button @click="add">+1</button>
    <button @click="handleAdd2">+1</button>
    <button @click="handleAddAsyn">+1Asyn</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {}
  },
  props: {},
  components: {},
  computed: {
    ...mapState(['count'])
  },
  watch: {},
  methods: {
    // 方式二
    ...mapMutations(['add']),
    ...mapActions(['addAsync']),
    handleAdd () {
      this.$store.commit('add')
    },
    // 下面的add是由mapMuations映射出来的
    handleAdd2 () {
      this.add()
    },
    handleAddAsyn () {
      this.$store.dispatch('addAsync')
    }
  }
}
</script>

<style lang="scss">

</style>
